<template>
  <view class="box">
    <view
      class="dan"
      v-for="(item, index) in questionList"
      :key="index"
      v-show="id == index"
    >
      <view class="top">
        <span class="s1">{{ index + 1 }}</span
        >/{{ questionList.length }}
        <span class="s2">{{
          item.type == 1 ? "单选题" : item.type == 2 ? "多选题" : item.type == 3 ? '判断题':'简答题'
        }}</span>
        (2分)
      </view>
      <!--单选-->
      <view class="con" v-show="item.type == 1 ? true : false">
        <view class="title"> {{ item.questionTitle }} </view>
        <view
          class="con_li"
          v-for="(x, y) in item.optionList"
          :key="y + 100"
          @click="chance1(x, index, y)"
          :class="{ change: item.checkedIndex === y }"
        >
          <span class="s1" @click="getanswer(y)">{{ x.name }}</span>
         
        </view>
      </view>
	  <!-- 判断 -->
	  <view class="con" v-show="item.type == 3 ? true : false">
	    <view class="title"> {{ item.questionTitle }} </view>
	    <view
	      class="con_li"
	      v-for="(x, y) in item.optionList"
	      :key="y + 100"
	      @click="chance1(x, index, y)"
	      :class="{ change: item.checkedIndex === y }"
	    >
	      <span class="s1">{{ x.name }}</span>
	      <span>{{ item.content }}</span>
	    </view>
	  </view>
      <!--多选-->
      <view class="con" v-show="item.type == 2 ? true : false">
        <view class="title"> {{ item.questionTitle }} </view>
        <view
          class="con_li"
          v-for="(x, y) in item.optionList"
          :key="y"
          @click="chance2(x, index, y)"
          ref="chan"
          :class="{ change: x.change }"
        >
          <span class="s1">{{ x.name }}</span>
          <span>{{ item.content }}</span>
        </view>
      </view>
      <!--填空-->
      <view class="con" v-show="item.type == 4  ? true : false">
        <view class="title">
          在生产安全过程中特种作业的重要性体现在
          <input
            type="text"
            class="text"
            @change="changeValue(index, value)"
            v-model="item.fillBlank"
          />
        </view>
      </view>
    </view>
    <u-popup v-model="show" mode="bottom">
      <view class="card">
        <view class="text"> 答题卡 </view>
        <view class="all">
         
          <view
            class="all-li"
            v-for="(item, index) in questionList"
            :key="index"
            :class="{ active: index + 1 <= id }"
          >
        
            {{ index + 1 }}
          </view>
        </view>
      </view>
    </u-popup>
    <view class="bottom">
      <view class="son" @click="last()">
        <u-icon name="arrow-left"></u-icon>
      </view>
      <view class="son" @click="shouc">
        <u-icon name="star" ref="shou"></u-icon>
        <p>收藏</p>
      </view>
      <view class="son" @click="get">
        <u-icon name="calendar"></u-icon>
        <p>答题卡</p>
      </view>
      <view class="son">
        <u-button type="primary" @click="chuan">提交</u-button>
      </view>
      <view class="son" @click="next">
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      testPaperId: "",
      conLi1: "",
      conLi2: "",
      conLiChange1: true,
      id: 0,
      show: false,
      temp: 3,
      sign: 2,
      value: "",
	

      //先清后加  当前题的所有信息
      currentQuestion: {},
      // list 每道题加个字段来控制
      questionList: [],
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    //打印出上个页面传递的参数。
	
    this.testPaperId = option.id;
    //console.log(this.testPaperId);
  },
  created() {
    this.diao();
  },
  computed: {
    aaa() {
      return (params) => {
        return params;
      };
    },
    many() {
      return (params, index) => {
        return this.questionList[index].checkedIndex === params;
      };
    },
  },
  watch: {
    fillBlank(val, value) {
      //console.log(this.questionList.fillBlank);
    },
  },
  methods: {
    // submit() {
    //   uni.navigateTo({
    //     url: "/pages/apply/ontest/defen/index",
    //     fail: (err) => {
    //       this.$u.toast("暂无此页面");
    //     },
    //   });
    //   var query = { id: "" };
    //   request({
    //     url: "/api/system/DataInterface/353813096059372805/Actions/Response",
    //     method: "POST",
    //     Headers: { "Content-Type": "application/json;charset=UTF-8" },
    //     data: JSON.stringify(query),
    //   }).then((res) => {
    //     console.log(res);
    //   });
    // },
    changeValue(index, value) {
      this.questionList[index].fillBlank = value;
      //console.log("111");
    },
    next() {
      this.id++;
      if (this.id >= this.questionList.length) {
        this.id = this.questionList.length - 1;
      }
    },
    last() {
      this.id--;
      if (this.id == -1) {
        this.id = 0;
      }
    },
    get() {
      this.show = true;
    },
    chance1(x, index, y) {
      this.questionList[index].val = x.optionId;
      this.questionList[index].checkedIndex = y;
	  console.log(y,'y');
	  console.log(this.id)
	  console.log(this.questionList);
	  if(y==0){
	  		  this.questionList[this.id].val="A"
	  }if(y==1){
		  this.questionList[this.id].val="B"
	  }if(y==2){
		  this.questionList[this.id].val="C"
	  }if(y==3){
		  this.questionList[this.id].val="D"
	  }
   
    },
    chance2(x, index, y) {
      this.questionList[index].val +=
         (y == 0 ? "A" : y == 1 ? "B" : y == 2 ? "C" : "D")+"," ;
      //   this.questionList[index].checkedIndex.push(y);
      //   console.log(this.questionList[index].checkedIndex);
      //   this.questionList[index].checkedIndex.map()=>{}
      let flag = -1;

      for (
        let i = 0;
        i <= this.questionList[index].checkedIndex.length + 1;
        i++
      ) {
        if (this.questionList[index].checkedIndex[i] == y) {
          flag = i;
          //   this.questionList[index].checkedIndex.splice(i, 1);
        }
      }

      if (flag > -1) {
        this.questionList[index].checkedIndex.splice(flag, 1);
        //this.questionList[index].val.splice(flag, 1);
        // console.log(this.questionList[index].checkedIndex);
      } else {
        this.questionList[index].checkedIndex.push(y);
        //this.questionList[index].val.push(x.optionId);
        // console.log(this.questionList[index].val);
      }

      this.questionList[index].optionList[y].change =
        !this.questionList[index].optionList[y].change;

		
		console.log(this.questionList);
    },
    shouc() {
      if (this.$refs.shou.name == "star") {
        this.$refs.shou.name = "star-fill";
      } else {
        this.$refs.shou.name = "star";
      }
    },
	getanswer(y){
		console.log('');
	},
    chuan() {
		  var query = {};
		  console.log(this.questionList);
		  // var ids = "";

		 
		  var arr = [];
		  for (let i = 0; i < this.questionList.length; i++) {
			  console.log('111')
			let ids = this.questionList[i].id;
		 var obj = {};
		obj.id = this.questionList[i].id;
		console.log(this.questionList[i].val.substr(-1));
		if(this.questionList[i].val.substr(-1)==','){
			this.questionList[i].val=this.questionList[i].val.substring(0,this.questionList[i].val.length-1);
			
		}
		obj.answer = this.questionList[i].val
			arr.push(obj)
			let uid = JSON.parse(localStorage.getItem("userInfo")).data.userId;
			console.log(arr);
			query = {
			  testPaperId: this.testPaperId,
			  userId: uid,
			  optionList:arr
			  
			 
			};
		  }
		    console.log(query);
		  request({
		    url: "/api/example/answersheet/createAnswersheet",
		    method: "POST",
		    Headers: { "Content-Type": "application/json;charset=UTF-8" },
		    data: JSON.stringify(query),
		  }).then((res) => {
		    console.log(res.data);
			// localStorage.removeItem('anserlist')
			localStorage.setItem("anserlist",JSON.stringify(res.data))
		  });
		  // ids = ids.substring(0, ids.length - 1);
		  // query = { id: ids };
		  // console.log(query);
setTimeout(
    function(){
        uni.navigateTo({
		    url: "/pages/apply/ontest/defen/index",
		    fail: (err) => {
		      this.$u.toast("暂无此页");
		    },
		  }); 
    },
    500,

)
		 
		
		  // for (var i = 0; i < this.questionList.length; i++) {
		  //   request({
		  //     url: "/api/system/DataInterface/353922866053383429/Actions/Response",
		  //     method: "POST",
		  //     Headers: { "Content-Type": "application/json;charset=UTF-8" },
		  //     data: JSON.stringify(query),
		  //   }).then((res) => {
		  //     console.log(res);
		  //   });
		  // }
		
	},
    diao() {
      var query = { id: this.testPaperId };
      request({
        url: "/api/system/DataInterface/353882481927128325/Actions/Response",
        method: "POST",
        Headers: { "Content-Type": "application/json;charset=UTF-8" },
        data: JSON.stringify(query),
      })
        .then((res) => {
			console.log(res.data,'');
          var dataArray = res.data.data;
          var questionList = [];
          var IdArray = [];
          for (var i = 0; i < dataArray.length; i++) {
            var temp = dataArray[i];
            if (IdArray.indexOf(temp.F_Id) != -1) {
              continue;
            }
            IdArray.push(temp.F_Id);
            var obj = {
              id: temp.F_Id,
              type: temp.F_Qtype,
              questionTitle: temp.F_Qtitle,
              optionList: [],
              checkedIndex: [],
              val: "",
            };
            questionList.push(obj);
          }
          for (var i = 0; i < questionList.length; i++) {
            for (var j = 0; j < dataArray.length; j++) {
              if (dataArray[j].F_Id == questionList[i].id) {
                var obj = {
                  optionId: dataArray[j].itemId,
                  name: dataArray[j].F_QuestionItemContent,
                };
                questionList[i].optionList.push(obj);
              }
            }
          questionList[i].optionList.reverse()
		  
		  }
			
          this.questionList = questionList;
          console.log(this.questionList);
        })
        .catch(() => {});
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.box {
  padding: 14rpx;
  background-color: #eef3f4;

  .card {
    height: 940rpx;
    .all {
      .all-li {
        width: 80rpx;
        height: 80rpx;
        background-color: #f8f8f8;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        margin-left: 48rpx;
        margin-right: 10rpx;
        margin-top: 50rpx;

        &.active {
          background-color: deepskyblue;
          color: #fff;
        }

        &.redColor {
          color: red;
        }

        &.greenColor {
          color: green;
        }
      }
    }
    .text {
      height: 100rpx;
      font-size: 40rpx;
      font-weight: 500;
      line-height: 100rpx;
      text-align: center;
    }
  }

  .bottom {
    margin-top: 240rpx;
    height: 126rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .son {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .con {
    height: 712rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 30rpx;

    .title {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 44rpx;
      color: #333;
      margin-bottom: 32rpx;

      .text {
        border-bottom: 1px solid black;
      }
    }

    .con_li {
      height: 120rpx;
      border-radius: 16rpx;
      background-color: #f8f8f8;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      .s1 {
        margin-left: 20rpx;
        margin-right: 20rpx;
        font-size: 36rpx;
      }
    }
    .change {
      /*选项改变颜色*/
      background: #1776ce;
      color: #fff;
    }
  }

  .top {
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 26rpx;
    border-radius: 16rpx;

    .s1 {
      font-size: 38rpx;
      color: #1776ce;
    }

    .s2 {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      margin-left: 24rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
